<template>
	<view class="apps">
		<view class="flex ptb10 plr20 aic">
			<text class="f14 red fweight6">融合</text><text class="f14 blue fweight6 mr10">体育</text>
			<view class="f16 b mr10">·</view>
			<view class="f14 mr10">羽球馆</view>
		</view>
		<uv-gap height="1" bgColor="#a82022"></uv-gap>
		<view class="flex plr20 ptb10 aic">
			<view class="f1 flex f13 ztcolors" v-if="list.length > 0">{{ list[0]['value'] }} {{ list[0]['week'] }}</view>
			<uv-icon name="calendar" size="24" color="#a82022" @click="open()"></uv-icon>
		</view>
		<uv-line color="#a82022"  length="100%" dashed></uv-line>
		<custom-tabs :list="list" :current="currentTabs" @click="chooseDate"  :itemStyle="itemStyle" :inactiveStyle="tabsinactiveStyle" :activeStyle="tabsactiveStyle"></custom-tabs>
		<view class="chooseApp" :style="'height:calc(100vh - 170px)'">
			<scroll-view id="scroll" scroll-x scroll-y class="f1 flex fdc" enable-flex using-sticky="true">
				<view class="chooseHead" :style="`width:`+headWidth+`px`">
					<view class="chooseHeadLeft"><view class="leftcon"></view></view>
					<view class="chooseHeadRight" :style="`width:`+headRightWidth+`px`" v-if="stadium">
						<view class="chooseItem" v-for="(item,index) in stadium" :key="index">
							<view>
								{{item.name}}
							</view>
						</view>
						
					</view>
				</view>
				<view class="chooseCon"  :style="`width:`+headWidth+`px`">
					<view class="chooseLeft" v-if="times">
						<view class="choosetimelist" v-for="(item,index) in times" :key="index">{{item}}:00</view>						
					</view>
					<view class="chooseRight" :style="`width:`+headRightWidth+`px`" v-if="subscribeList">
						<view class="chooselist" v-for="(items,indexs) in subscribeList" :key="indexs">
							<view class="chooseblock" v-for="(item,index) in items" :key="index">
							<view class="chooseitem disable" v-if="item.disable == 1">已约</view>
							<view :class=" inActive('P'+indexs+'-S'+index) >= 0 ?`chooseitem active`:`chooseitem`" v-else @click="handleSubscribe(item,indexs,index)">¥{{chargCost}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="cart">
			<view class="left">合计:<text class="b mlr20">¥{{order.order_amount}}</text>
				<text class="f12 c999">已选{{order.times}}小时</text>
				<uv-icon :name="iconName" color="#999" @click="showPopup" v-show="active.length>0"></uv-icon>
			</view>
			<view class="right" @click="handleOrder()" v-if="active.length>0">预约下单</view>
			<view class="right right2"  v-else>预约下单</view>
		</view>
		<view class="popCon" v-show="isShow">
			<view v-if="order.record">
				<view class="poplist" v-for="(item,index) in order.record" :key="index">
					<view class="popleft">{{item.stadium_name}}</view>
					<view class="popcenter">{{item.hour}}:00-{{parseInt(item.hour)+1}}:00</view>
					<view class="popright">¥{{chargCost}}</view>
				</view>
			</view>
		</view>
		<uv-calendar ref="calendar" color="#a82022" :maxDate="maxDate" :defaultDate="defaultDate" mode="single" @confirm="confirm"></uv-calendar>
		<uv-modal ref="modal" title="会员升级提示" content='购买尊会员卡可免费预约场地，享有更多尊享权益！' :showCancelButton="true" cancelText="不了->直接预约" confirmText="我要->至尊会员" :asyncClose="true" @close="buyOrder" @confirm="goShop" @cancel="buyOrder"></uv-modal>
	</view>
</template>

<script>
	import { util } from '/common/util.js';
	export default {
		data() {
			return {
				submitEvent:false,
				iconName:'arrow-up',//'arrow-down'
				isShow:false,
				listTop:0,
				currentTabs:0,
				chargCost:0,
				itemStyle:{padding:'10rpx 2px'},
				tabsinactiveStyle:{ 
					borderRadius:'2px',padding:'2px 4px',display:'flex',flexDirection: 'column',
					fontSize:'24rpx',color:'#333',alignItems: 'center',backgroundColor:"#eee",
				},
				tabsactiveStyle:{
					borderRadius:'2px', padding:'2px 4px',display:'flex',flexDirection: 'column',
					fontSize:'24rpx',color:'#fff',alignItems: 'center',backgroundColor:"#a82022",
				},
				headWidth:850,
				headRightWidth:800,
				defaultDate:'',
				maxDate:'',
				list:[],
				times:{},
				stadium:[],
				subscribeList:[],
				order:{
					times:0,
					order_amount:0,
					show:false,
					record:[],
				},
				active:[],
			}
		},
		onLoad(){
			this.getList();
			let query = uni.createSelectorQuery().select('#scroll').boundingClientRect(data => {
				this.listTop = data.top+100;
			}).exec();
		},
		onshow(){
			this.getSubscribe();
		},
		methods: {
			inActive(item){
				return this.active.indexOf(item);
			},
			open() {
				this.$refs.calendar.open();
			},
			//日历选择
			confirm(e) {
				const date = e[0];
				this.currentTabs = this.list.findIndex(item => item.value == date);
				this.defaultDate = this.list[this.currentTabs].value;
				this.getSubscribe();
			},
			//选择日期
			chooseDate(item) {
				this.currentTabs = item.index;
				this.defaultDate = this.list[this.currentTabs].value;
				this.getSubscribe();
			},
			showPopup(){
				if(this.isShow){
					this.isShow = false;
					this.iconName = 'arrow-up'
				}else{
					this.isShow = true;
					this.iconName = 'arrow-down'
				}
				
			},
			async getList(){
				const data = await util.request({url:"/subscribe/times"});
				if(data.code == 200){
					this.list = data.data;
					this.maxDate =this.list[this.list.length-1].value;
					this.defaultDate = this.list[0].value;
					this.getSubscribe();
				}
			},
			async getSubscribe(){
				const day = this.list[this.currentTabs].value;
				const data = await util.request({url:"/subscribe/index",load:true,data:{day:day}});
				if(data.code == 200){
					this.chargCost = data.data.charg_cost
					this.times = data.data.times;
					this.subscribeList = data.data.data;
					this.stadium = data.data.stadium;
					this.headRightWidth = data.data.stadium?.length * 50;
					this.headWidth = this.headRightWidth+50;
					this.order = {
						times:0,
						order_amount:0,
						show:false,
						record:[],
					};
					this.active=[];
				}
			},
			async handleSubscribe(item,index1,index2){
				if(this.inActive('P'+index1+'-S'+index2) >=0){
					this.active = this.active.filter(items=>items !== 'P'+index1+'-S'+index2);
					this.order.record = this.order.record.filter(rec=> rec.filter !== ('F'+item.stadium+'T'+item.times) );
				}else{
					if(this.order.record.findIndex(rec=>rec.hour == item.times)>=0){
						util.alert('时间段重复');
						return  false;
					}
					const subscribe = {
						day:this.list[this.currentTabs].value,
						hour:item.times,
						stadium_id:item.stadium,
						stadium_name:item.stadium_name,
						filter:'F'+item.stadium+'T'+item.times,
					}
					
					const data = await this.inspect(subscribe);
					if(data.code != 200){
						util.alert(data.msg);
						return false;
					}
					this.order.record.push(subscribe);
					const activeindex = 'P'+index1+'-S'+index2;
					this.active.push(activeindex);
				}
				this.order.times =this.order.record.length,
				this.order.order_amount = this.order.record.length * this.chargCost;
			},
			inspect(item){
				return util.request({url:"/subscribe/inspect",load:true,data:item});
			},
			async handleOrder(){
				let data =  await util.request({
						url:"/mpwechat/userinfo",
					});
				if(data.code != 200){
					uni.navigateTo({
						url:"/pages/member/login"
					})
				}
				if(data.data.group_id != 3){
					this.$refs.modal.open();
				}else{
					this.vipOrder();
				}
			},
			goShop(){
				this.$refs.modal.close();
				uni.navigateTo({
					url:"/pages/sale/goods?id=5"
				});
			},
			goPay(){
				this.$refs.model.close();
				this.buyOrder();
			},
			async vipOrder(){
				if(this.submitEvent){
					return ;
				}
				this.submitEvent = true;
				const data = await util.request({
						url:"/subscribe/vip", data:this.order,load:1,header:{'content-type': 'application/json'}
					});
			
				this.getSubscribe();
				if(data.code != 200){
					util.alert(data.msg);
					
				}else{
					util.alert('预约成功');
					setTimeout(function(){
						uni.redirectTo({
							url:"/pages/order/order?id="+data.data.order.id
						})
					},1500);
				}
			},
			async buyOrder(){
				if(this.submitEvent){
					return ;
				}
				this.submitEvent = true;
				console.log(this.order);
				let payconfig =  await util.request({
						url:"/subscribe/order", data:this.order,load:1,header:{'content-type': 'application/json'}
					});
			
				if(payconfig.code != 200){
					this.getSubscribe();
					util.alert(payconfig.msg);
				}else{
					wx.requestPayment({
						timeStamp: payconfig.data.payment.timeStamp,
						nonceStr: payconfig.data.payment.nonceStr,
						package: payconfig.data.payment.package,
						signType: payconfig.data.payment.signType,
						paySign: payconfig.data.payment.paySign,
						success (res) {
							util.alert('支付成功');
							this.getSubscribe();
							setTimeout(function(){
								uni.redirectTo({
									url:"/pages/order/order?id="+payconfig.data.order.id
								})
							},1500)
						},
						fail (err) {
							if(err.errMsg === 'requestPayment:fail cancel'){
								util.alert('您取消了支付');
							}else{
								util.alert('支付失败');
							}
						},
						comlete(res){
							console.log(res);
						}
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.chooseApp{width:100%; overflow: hidden;display: flex;
		.chooseHead{height:40px;display: flex; position: sticky;top:0;left:0;background-color: #fff;z-index: 15;
			.chooseHeadLeft{position: sticky;left:0;width:50px;height:40px;
				.leftcon{width:50px;height:40px;background-color: #fff;z-index: 20;}
			}
			.chooseHeadRight{flex:1;display:flex; 
				.chooseItem{height:40px;width:50px;display:flex; align-items: center; justify-content: center; font-size: 28rpx;}
			}
		}
		.chooseCon{display: flex;
			.chooseLeft{width:50px;display: flex;flex-direction: column; position: sticky; left:0;background-color: #fff;z-index: 10;
				.choosetimelist{width:50px;height:40px;text-align: center; font-size: 28rpx;padding-top: 10rpx; box-sizing:border-box ;
				}
			}
			.chooseRight{flex:1;display: flex;
				.chooselist{display:flex;flex-direction: column;
					.chooseblock{ padding:2px;width:50px; height:40px; box-sizing: border-box;
					.chooseitem{width:46px;height:36px;border:1rpx solid #a82022; background:#eab9be;border-radius: 10rpx; color:#000;
					display:flex;align-items: center;font-size: 28rpx;justify-content: center;}
					.disable{border:1rpx solid #ddd;background-color: #eee;color:#ccc; font-size: 26rpx;}
					.active{background-color: #a82022;}
					}
				}
			}
		}
		
	}
	.cart{display: flex; align-items: center;height:50px; box-sizing:border-box ;border-top: 1px solid #a82022;
		.left{flex:1;padding:14px 10px;font-size: 13px; display: flex; align-items: center;}
		.right{border-radius: 30px 0 0 30px; background-color: #a82022; color:#fff;font-size: 15px;padding:12px 10px 12px 30px;}
		.right2{background-color: #eee;color:#666;}
	}
	.c999{color:#666;}
	.popCon{padding:10rpx;position: fixed; bottom:51px;left:0;right:0;min-height: 50rpx;background-color: #fff;z-index: 10075;border-top: 1px solid #f1f1f1;
		.poplist{display: flex; align-items: center;font-size: 14px;padding:5px 0;border-bottom: 1px solid #eee;
			.popleft{width:80px;font-weight: 400; color:#666;}
			.popcenter{flex:1;font-weight: 400; color:#666; display: flex; justify-content: center;}
			.popright{color:#000;font-weight: 600;}
		}
	}
</style>
